<template>
  <view class="verify-code-page">
	<view class="bottomcolor"></view>
    <!-- 输入区域：始终显示 -->
    <view class="input-section">
      <text class="label">输入核销码</text>
      <view class="input-wrap">
        <input 
          class="input" 
          type="text" 
          placeholder="请输入核销码" 
          placeholder-style="color: #ccc;"
          v-model="codeValue"
        />
        <button class="identify-btn" @click="handleIdentify">识别</button>
      </view>
    </view>

    <!-- 核销信息区域：识别后显示 -->
    <view class="info-section" v-if="showInfo">
      <view class="code-title">核销码 {{ codeValue }}</view>
	  <template>
	    <view class="horizontal-line"></view>
	  </template>
      <!-- 服务内容 -->
      <view class="section">
        <text class="section-header">服务内容</text>
        <text class="section-item">XXX标准洗车服务包含</text>
        <text class="section-item">整车泡沫冲洗擦T</text>
        <text class="section-item">轮胎轮毂冲洗清洁</text>
        <text class="section-item">车内吸尘</text>
        <text class="section-item">内饰脚垫简单除尘</text>
        <text class="section-item">(不包含虫尸、水泥、沥青和顽固污渍清理等)</text>
      </view>
      <!-- 订单信息 -->
      <view class="section">
        <text class="section-header">订单信息</text>
        <text class="section-item">订单价格: ¥30.00</text>
        <text class="section-item" style="color: #f00;">实付金额: ¥25.00</text>
        <text class="section-item">优惠金额: ¥5.00</text>
        <text class="section-item">订单编号 2020032554565799</text>
        <text class="section-item">支付时间 2020.03.30 14:40:45</text>
        <text class="section-item">预约时间 2020.03.30 14:40</text>
      </view>
      <!-- 确认核销按钮 -->
       <button 
              class="confirm-btn" 
              @click="showConfirmModal" 
              :disabled="isBtnDisabled"
              :style="isBtnDisabled ? 'background-color: #999;' : 'background-color: #1296db;'"
            >
              {{ isBtnDisabled ? '已核销' : '确认核销' }}
            </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      codeValue: '',   // 绑定输入框的核销码
      showInfo: false, // 控制“核销信息区域”是否显示
	  isBtnDisabled: false // 按钮是否禁用，初始为可点击
    };
  },
  methods: {
    onBack() {
      // 返回上一页
      uni.navigateBack({ delta: 1 });
    },
    handleIdentify() {
      // 简单模拟：输入核销码为 MC1234-5678-9012 时触发显示
      if (this.codeValue.trim() === '123') {
        this.showInfo = true;
      } else {
        uni.showToast({
          title: '核销码无效，请重新输入',
          icon: 'none',
          duration: 2000
        });
      }
    },
	showConfirmModal() {
	      uni.showModal({
	        title: '核销此订单',
	        content: '请您仔细核对订单，此操作不可撤销，请谨慎操作！',
	        success: (res) => {
	          if (res.confirm) {
	            // 这里可编写真正的核销逻辑，比如调用后端接口
	            console.log('用户点击确认，执行核销操作'); 
	            // 假设核销成功后，修改按钮状态
	            this.isBtnDisabled = true;
	            // 核销成功提示 
	            uni.showToast({
	              title: '核销成功',
	              icon: 'success',
	              duration: 2000
	            });
	          } else if (res.cancel) {
	            console.log('用户点击取消，不执行核销操作');
	          }
	        }
	      });
	}
  }
};
</script>

<style scoped>
.verify-code-page {
  background-color: #fff;
  min-height: 100vh;
  font-size: 14px;
  color: #333;
  position: relative;
  z-index: 1;
}

.bottomcolor{
	position: absolute;
	background-color: #3399ff;
	width: 100%;
	height: 400rpx;
	z-index: 2;
}

/* 输入区域 */
.input-section {
  position: absolute;
  background-color: #fff;
  width: 90%;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 5% 0 5%;
  z-index: 3;
  box-sizing: border-box;
}
.label {
  font-size: 16px;
  color: #3399ff;
  margin-bottom: 8px;
  display: block;
}
.input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.input {
  flex: 1;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  font-size: 16px;
}
.identify-btn {
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1296db;
  color: #fff;
  font-size: 14px;
  border: none;
  border-radius: 0 5px 5px 0;
}

/* 核销信息区域 */
.info-section {
  position: absolute;
  background: #fff;
  width: 90%;
  border-radius: 8px;
  padding: 15px;
  margin: 270rpx 5% 0 5%;
  box-sizing: border-box;
  z-index: 3;
}
.code-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.horizontal-line {
  height: 2px;
  width: 100%;
  background-color: #e0e0e0;
  margin: 20rpx 0;
}

.section {
  margin-bottom: 15px;
}
.section-header {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}
.section-item {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

/* 确认核销按钮 */
.confirm-btn {
  width: 100%;
  background-color: #1296db;
  color: #fff;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  margin-top: 20px;
}
/* 确认核销按钮基础样式，动态样式通过 :style 覆盖 */
.confirm-btn {
  width: 100%;
  color: #fff;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-radius: 30px;
  margin-top: 20px;
}
</style>